<template>
    <section class="clearfix pb5 bgwhite">
        <div class="br4 ml10 mr10">
            <div class="pb15 pl20 pr20 pt15">
                <p class="tl lh30 yellow bold"><span class="fs30">￥{{winLossMoney|formatMoney}}</span></p>
                <p class="clearfix fs14">
                    <span class="fl fontc0">总浮动盈亏 ({{gold?'模拟':'实盘'}})</span>
                    <span class="fr" style="color:#475FBA;" @click="()=>this.$store.commit('setGold',!this.gold)">{{gold?'转实盘':'转模拟盘'}}</span>
                </p>
            </div>
            <div class="btn">
                <a href="javascript:;" class="line" @click="sellAll">
                    <img :src="onekeywindIcon" height="16" alt>
                    <span class="fontc1 lh50 fs14">一键平仓</span>
                </a>
                <router-link to="/historyOrder">
                    <a class="dbb" href="javascript:;">
                        <img :src="historyIcon" height="16" alt>
                        <span class="fontc1 lh50 fs14 line">历史订单</span>
                    </a>
                </router-link>
                <a class="fontc1 topup" href="javascript:;" @click.stop="getTopupAuth">
                    <img :src="withdrawIcon" height="16" alt>
                    <span class="fontc1 lh50 fs14">立即充值</span>
                </a>
            </div>
        </div>
    </section>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
export default {
    name: 'cap',
    data () {
        return {
            onekeywindIcon: "./static/imgs/order1.svg",
            historyIcon: "./static/imgs/order2.svg",
            withdrawIcon: "./static/imgs/order3.svg",
        }
    },
    mounted () {
    },
    props: {
        winLossMoney: {
            type: Number,
            required: true,
            default: 0,
        },
        sellAll: {
            type: Function,
            required: true,
            default: () => {},
        }
    },

    computed :{
        ...mapState(['gold','topupAuth'])
    },
    methods: {
        ...mapMutations(['setGold']),
        getTopupAuth() {
            if (this.topupAuth == {}) {
                this.$router.push({
                    path: "/login",
                });
            } else if (this.topupAuth.identify === 1 && !this.topupAuth.cardState) {
                MessageBox.confirm("", {
                    title: "充值",
                    message: "为了您的资金安全，请前去绑卡",
                    confirmButtonText: "去绑定",
                    confirmButtonClass: "red"
                }).then(() => {
                    this.$router.push({
                        path: "/account/bindbank",
                    });
                });
            } else {
                window.location.href = "./account/paySelect.html";
            }
        }
    }
}
</script>
<style scoped lang='scss'>
	section {
		margin-top: rem(40px);
		border-top: 1px solid #e2e2e2;
		padding-top: rem(10px);
	}

	section>div {
		box-shadow: 0 rem(1px) rem(3px) rgba(0, 0, 0, 0.2);
	}

    .btn {
		display: flex;
		background-color: #f8f9fc;
		border-radius: rem(5px);
	}

	.btn>a {
		flex: 1;
	}

	.line:after {
		content: "";
		height: rem(13px);
		width: 1px;
		background-color: #ddd;
		float: right;
		margin-top: rem(18px);
	}

	.btn img {
		vertical-align: rem(-3px);
		margin-right: rem(3px);
	}
</style>


